<template>
  <view class="flex-col justify-start items-center relative group_2">
    <view class="flex-col section_5 align-center">
      <image
             class="image_5"
             src="@/static/common/i-kingBadge.png" v-if="detailObj.title==='King badge'" />
      <image
             class="image_5"
             src="@/static/common/i-warriorBadge.png" v-if="detailObj.title==='Warrior badge'" />
      <view class="mt-16 flex-col group mb-16">
        <view class="mt-14 flex-row justify-between items-center self-stretch gap-1">
          <view class="flex-row items-center section_6 ">
            <view class="flex-col justify-start items-center shrink-0 text-wrapper_2">
              <text class="font_2 text_4">{{$t('drama.cycle')}}</text>
            </view>
            <text class="font_2 text_5 ml-6">{{detailObj.periodVoList[0].taskDays}} {{$t('drama.day')}}</text>
          </view>
          <text class="font_3 text_6 ml-10">{{$t('drama.current')}}:{{(detailObj.periodVoList[0].returnProbability*100).toFixed(2)}}%</text>
        </view>
      </view>
    </view>


  </view>


</template>

<script>
export default {
  props: {
    detailObj: {
      type: Object

    }
  },
  computed: {
    // currentImage() {
    //   // debugger
    //   // console.log(this.detailObj.title)
    //   console.log(this.detailObj.title === "King badge" ? '@/static/common/i-kingBadge.png' : '@/static/common/i-warriorBadge.png')

    //   return this.detailObj.title === "King badge" ? '@/static/common/i-kingBadge.png' : '@/static/common/i-warriorBadge.png'
    // }
  },

  methods: {
    currentImage() {
      console.log(this.detailObj.title === "King badge" ? '@/static/common/i-kingBadge.png' : '@/static/common/i-warriorBadge.png')
      return this.detailObj.title === "King badge" ? '@/static/common/i-kingBadge.png' : '@/static/common/i-warriorBadge.png';
    }
  }

}
</script>

<style lang="scss" scoped>
.group_2 {
  padding: 0.75rem 0 0.25rem;

  .font_2 {
    font-size: 0.81rem;
    font-family: PingFang SC;
    line-height: 0.75rem;
    color: #ffffff;
  }

  .image_5 {
    border-radius: 3rem;
    filter: drop-shadow(0rem 0.5rem 0.5rem #00000080);
    width: 91.4667vw;
    height: 100vw;
  }

  .section_5 {
    margin: 0.75rem 1rem 0;
    padding: 1.75rem 3.13rem 1.13rem;
    filter: drop-shadow(0rem 0.5rem 0.5rem #00000080);
    background-image: url('@/static/common/b-blage.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .image_5 {
      border-radius: 0.5rem;
      filter: drop-shadow(0rem 0.75rem 0.75rem #00000080);
      width: 15.19rem;
      height: 15.19rem;
    }

    .group {
      padding: 0 0.5rem;

      .text_3 {
        line-height: 1.02rem;
      }

      .section_6 {
        border-radius: 0.63rem 0rem 0.25rem 0.63rem;
        width: 6.81rem;
        height: 1.5rem;

        .text-wrapper_2 {
          padding: 0.5rem 0 0.25rem;
          background-image: linear-gradient(105.5deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
          border-radius: 0.25rem 0rem 0rem 0rem;
          width: 2.75rem;
          height: 1.5rem;

          .text_4 {
            line-height: 0.69rem;
          }
        }

        .text_5 {
          line-height: 0.69rem;
        }
      }

      .text_6 {
        color: #00f6ff;
        line-height: 0.74rem;
      }
    }
  }

  .pos_2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 0.5rem;
  }
}
</style>